<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI-PROXY 管理后台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <link href="/css/main.css" rel="stylesheet">
    <style>
        body { background: #f8fafc; font-family: 'Inter', '微软雅黑', Arial, sans-serif; }
        .admin-navbar {
            background: #fff;
            box-shadow: 0 2px 8px 0 rgba(60,72,100,0.04);
            height: 60px;
            display: flex;
            align-items: center;
            padding: 0 32px;
            border-bottom: 1px solid #f1f5f9;
            position: sticky;
            top: 0;
            z-index: 100;
            margin-left: 220px;
        }
        .admin-navbar .logo {
            font-weight: bold;
            font-size: 1.4rem;
            color: #2563eb;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
        }
        .admin-navbar .logo i { font-size: 1.3rem; margin-right: 8px; }
        .admin-navbar .logo-text { font-weight: 700; }
        .admin-navbar .admin-title { font-weight: 500; font-size: 1.15rem; color: #2563eb; margin-left: 12px; letter-spacing: 0; }
        .admin-navbar .user-area {
            margin-left: auto;
            display: flex;
            align-items: center;
        }
        .admin-navbar .user-avatar {
            width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(90deg,#2563eb 60%,#60a5fa 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-left: 18px;
        }
        .admin-navbar .btn-outline-primary { border-radius: 8px; }
        #sidebar { width: 220px; background: #fff; border-right: 1px solid #f1f5f9; min-height: 100vh; padding-top: 16px; position: fixed; left: 0; top: 0; z-index: 99; transition: all 0.2s; }
        #sidebar .navbar-brand { font-size: 1.3rem; color: #2563eb; font-weight: 700; letter-spacing: 1px; }
        #sidebar .components { list-style: none; padding: 0; margin: 0; }
        #sidebar .components li { margin-bottom: 6px; }
        #sidebar .components li a { display: flex; align-items: center; padding: 12px 24px; border-radius: 10px; color: #222; font-weight: 500; text-decoration: none; transition: background 0.15s, color 0.15s; }
        #sidebar .components li.active a, #sidebar .components li a:active { background: #e0e7ff; color: #2563eb; }
        #main-content { margin-left: 220px; min-height: 100vh; background: #f8fafc; }
        .main-card { background: #fff; border-radius: 18px; box-shadow: 0 2px 16px 0 rgba(37,99,235,0.08); padding: 32px 28px 24px 28px; margin-top: 32px; }
        @media (max-width: 900px) {
            #main-content { margin-left: 0; }
            #sidebar { position: static; width: 100%; min-height: auto; border-right: none; }
            .main-card { margin-top: 16px; padding: 18px 6px; }
            .admin-navbar { margin-left: 0; }
        }
        /* 登录弹窗美化 */
        .modal-content { border-radius: 16px; }
        .modal-header { border-radius: 16px 16px 0 0; border-bottom: 1px solid #e5e7eb; }
        .modal-footer { border-radius: 0 0 16px 16px; border-top: 1px solid #e5e7eb; }
        .form-label { font-weight: 500; }
    </style>
</head>
<body>
    <div class="admin-navbar">
        <div class="logo">
            <i class="bi bi-gear-fill"></i>
            <span class="logo-text">AI-PROXY</span>
            <span class="admin-title ms-2">管理后台</span>
        </div>
        <div class="user-area">
            <span class="me-3 d-none d-md-block">欢迎使用</span>
            <div class="user-avatar"><i class="bi bi-person-circle"></i></div>
            <button class="btn btn-outline-primary ms-3" onclick="logout()">退出</button>
        </div>
    </div>
    <nav id="sidebar">
        <div class="d-flex align-items-center justify-content-center mb-4" style="height:48px;">
            <span class="navbar-brand"><i class="bi bi-gear-fill me-2"></i>AI-PROXY</span>
        </div>
        <ul class="components">
            <li class="active">
                <a href="#" onclick="loadPage('api-config')">
                    <i class="bi bi-gear"></i>
                    <span>API配置</span>
                </a>
            </li>
        </ul>
    </nav>
    <div id="main-content">
        <div class="main-card">
            <!-- 动态页面内容 -->
            <div id="main-content" style="margin-top:0;">
                <div class="text-center">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 登录模态框 -->
    <div class="modal fade" id="loginModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">管理员登录</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="loginForm" autocomplete="off" onsubmit="event.preventDefault(); login();">
                        <input type="text" style="display:none" autocomplete="username">
                        <div class="mb-3">
                            <label for="token" class="form-label">访问令牌</label>
                            <input type="password" class="form-control" id="token" placeholder="请输入访问令牌" autocomplete="new-password" autocorrect="off" autocapitalize="off" spellcheck="false">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="login()">登录</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/utils.js"></script>
    <script src="/js/auth.js"></script>
    <script src="/js/main.js"></script>
    <script src="/js/api-config.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const token = localStorage.getItem('admin_token');
            if (!token) {
                setTimeout(() => {
                    if (typeof bootstrap !== 'undefined') {
                        showTokenModal();
                    } else {
                        alert('Bootstrap未加载，请刷新页面重试');
                    }
                }, 500);
            } else {
                loadPage('api-config');
            }
            // 新增：回车自动登录
            const tokenInput = document.getElementById('token');
            if (tokenInput) {
                tokenInput.addEventListener('keydown', function(event) {
                    if (event.key === 'Enter') {
                        event.preventDefault();
                        login();
                    }
                });
            }
        });
    </script>
</body>
</html> 